<template>
  <div class="we-chat-group">
    <Header @searchList="searchList" @handleSync="handleSync" />
    <div class="login-box" v-if="!isLogin">
      <wxLogin @setIsLogin="setIsLogin" @success="componentDisplay" />
    </div>
    <div class="we-chat-group-content">
      <ChatGroupList
        :chatGroupMap="chatGroupMap"
        :activeName="queryParams.activeName"
        @loadScroll="loadScroll"
        @selectChat="selectChat"
        @setActiveName="setActiveName"
      />
      <ChatGroupContent
        ref="chatgroup"
        @getPage="getPage"
        @setIsLogin="setIsLogin"
        @setLoading="setLoading"
        v-loading="loading"
      />
      <ChatGroupRight
        :selectItem="selectItem"
        :enterpriseMembers="enterpriseMembers"
        :externalMembers="externalMembers"
        :index="indexs"
        :key="mathRandom"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import Header from './components/header.vue'
import ChatGroupList from './components/chatGroupList.vue'
import ChatGroupContent from './components/chatGroupCotent.vue'
import ChatGroupRight from './components/chatGroupRight.vue'
import * as WeChatGroupApi from '@/api/wecom/chatgroup'
import * as WeComApiConfigApi from '@/api/wecom/apiconfig'
import wxLogin from '@/views/wecom/user/components/wxLogin.vue'

const { t } = useI18n()

const loading = ref(false)
const chatgroup = ref(null)
defineOptions({ name: 'WeChatGroup' })

const chatGroupMap = ref([])
const msgMap = ref([])
const totals = ref(0)
const queryParams = ref({
  pageNo: 1,
  pageSize: 20,
  name: '',
  userType: '0',
  isAll: 0
})
const selectItem = ref('')
const indexs = ref('')

// 筛选
const setActiveName = (val) => {
  queryParams.value.userType = val
  queryParams.value.pageNo = 1
  chatGroupMap.value = []
  getList()
}

onBeforeMount(() => {
  getList()
})
// 搜索
const searchList = (value) => {
  queryParams.value.pageNo = 1
  queryParams.value.name = value
  chatGroupMap.value = []
  getList()
}
/** 查询列表 */
const getList = async () => {
  try {
    const { list, total } = await WeChatGroupApi.getWeChatGroupPage(queryParams.value)
    totals.value = total
    if (list && list.length) chatGroupMap.value = chatGroupMap.value.concat(list)
  } catch (error) {
    ElMessage.error(error)
  } finally {
  }
}
// 同步
const handleSync = async () => {
  const data = await WeChatGroupApi.syncChatGroup()
  if (data) {
    ElMessage.success(t('同步成功'))
    queryParams.value.pageNo = 1
    chatGroupMap.value = []
    await getList()
  } else {
    ElMessage.error(t('同步有误'))
  }
}
/*无限滚动*/
const loadScroll = () => {
  queryParams.value.pageNo += 1
  getList()
}
const mathRandom = ref(0)
const limit = ref({
  pageNo: 1,
  pageSize: 10
})
const noMore = ref(false)
const enterpriseMembers = ref([])
const externalMembers = ref([])
const changeItem = ref([])

/*select item*/
const selectChat = (item, index) => {
  if (selectItem.value == '' || selectItem.value.chatId != item.chatId) {
    setLoading(true)
    mathRandom.value++
    selectItem.value = item
    if (item.memberList) {
      enterpriseMembers.value = item.memberList.filter((item) => item.type == 1)
      externalMembers.value = item.memberList.filter((item) => item.type == 2)
    } else {
      enterpriseMembers.value = []
      externalMembers.value = []
    }
    indexs.value = index
    limit.value.pageNo = 1
    noMore.value = false
    changeItem.value = []
    getMsgRecordPage()
  }
}
const setLoading = (val) => {
  loading.value = val
}
const toDate = (number) => {
  var date = new Date(number)
  var Y = date.getFullYear() + '-'
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()

  // 添加时分秒
  var H = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
  var Min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  var S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()

  return Y + M + D + ' ' + H + ':' + Min + ':' + S
}
/*内容分页*/
const getPage = () => {
  limit.value.pageNo += 1
  getMsgRecordPage()
}
/*选择的客户群*/
const getMsgRecordPage = async () => {
  if (noMore.value) {
    setLoading(false)
    return
  }
  const { list } = await WeComApiConfigApi.listByChat({
    weChatId: selectItem.value.chatId,
    pageSize: limit.value.pageSize,
    pageNo: limit.value.pageNo
  })
  if (list.length == 0) {
    noMore.value = true
  }
  list.forEach((element) => {
    let sendName = selectItem.value.memberList.find((item) => item.weUserId == element.senderId)
    element.sendTime = toDate(element.sendTime)
    element.weComeName = sendName ? sendName.name : '系统'
  })
  list.map((item) => {
    changeItem.value.unshift(item)
  })
  chatgroup.value.updateData(changeItem.value)
}
const componentDisplay = () => {
  chatgroup.value.updateData(changeItem.value)
}
const isLogin = ref(true)
const setIsLogin = (val) => {
  isLogin.value = val
}
</script>
<style scoped>
.we-chat-group {
  position: relative;
  word-break: break-word;
  height: calc(
    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-content-padding) -
      var(--app-content-padding) - var(--app-footer-height)
  );
}
.login-box {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}
.we-chat-group-content {
  height: calc(100% - 66px);
  display: flex;
  align-items: flex-start;
}
</style>
